<template>
  <div class="main">
    <div class="nav">
      <img :src="back" alt="" @click="handleBack"/>
    </div>
    <div class="body">
      <van-tabs v-model="active" class="custom-tabs">
        <van-tab :title="obj.name" v-for="obj in channels" :key="obj.id">
<!--          <keep-alive>-->
            <friend-list :article="obj"></friend-list>
<!--          </keep-alive>-->
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import FriendList from "./components/friendList";
import {mapState} from "vuex";

export default {
  name: "addFriend",
  components: {FriendList},
  data() {
    return {
      back: require("@/assets/my/back.png"),
      active: 2,
      channels: [
        {name: '朋友', id: 0},
        {name: '关注', id: 1},
        {name: '粉丝', id: 2},
      ],
    }
  },
  mounted() {
  },
  methods: {
    chooseTab(item) {
      console.log(item)
      this.active = item
      switch (item) {
        case '0':
          this.title = `我的朋友(${this.userNum[1].num})`
          break
        case '1':
          this.title = `我的关注(${this.userNum[2].num})`
          break
        case '2':
          this.title = `我的粉丝(${this.userNum[3].num})`
          break
      }
    },
    handleBack() {
      this.$router.go(-1);
      let message = {
        action: 'showBottom',
        param: {}
      }
      getInfoFromVue.postMessage(JSON.stringify(message))
    },
  }
}
</script>

<style scoped lang="less">
.main {
  height: 100vh;
  padding: 0px 15px;
  position: relative;

  .nav {
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 15px;
    z-index: 999;

    > img {
      width: 10px;
      height: 16px;

    }


  }

  .body {
    //position: fixed;
    //left: 25px;
    //top:0;
    .custom-tabs /deep/ .van-tab--active {
      color:  rgba(242, 150, 0, 1); /* 设置选中标签的字体颜色 */
    }
    /deep/ .van-tabs__line {
      background: rgba(242, 150, 0, 1);
      width: 23px;
      height: 2px;
    }

    /deep/ .van-nav-bar__content {
      height: 48px;

      // 标题
      .van-nav-bar__title {
        // 不要默认设置最大宽度
        max-width: unset;
        font-size: 14px;
      }
    }

    /deep/ .van-tabs {
      //width: 80%;
    }

    /deep/ .van-tabs--line .van-tabs__wrap {
      //padding-top: 10px;
      height: 44px;
    }

    /deep/ .van-tab--active {
    }

    /deep/ .van-tab {
      font-size: 20px;
      font-weight: 500;
      line-height: 28.96px;
      //color: rgba(199, 199, 199, 1);
      text-align: center;
      color: rgba(84, 84, 84, 1);
    }
  }

}
</style>